<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="webjars/datatables-buttons/1.6.1/css/buttons.semanticui.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/buttons.semanticui.js"></script>
    <script src="js/main.js"></script>
    <title>Профиль</title>
</head>
<body>
<div class="ui container">
    <div th:insert="~{header :: header}"></div>
    <div class="ui segment">
        <h3 class="ui header">Профиль пользователя </h3>
        <div class="ui form">
            <div class="field">
                <label>Имя</label>
                <input id="first_name" type="text" name="first_name" placeholder="Имя" readonly="">
            </div>
        </div>
        <div class="ui comments">
            <h3 class="ui dividing header">Комментарии</h3>
            <div id="comments"></div>
            <div class="ui reply form">
                <div class="field">
                    <textarea id="commentTextarea"></textarea>
                </div>
                <div class="ui primary submit labeled icon button" onclick="addComment()"><i class="icon edit"></i>Оставить комментарий</div>
            </div>
        </div>
    </div>
    <div th:insert="~{footer :: footer}"></div>
</div>
<script>
    $(document).ready(function() {
        loadComments();
    });

    function loadComments() {
        $.ajax({
            url: "user/"+[[${id}]],
            type: "GET",
            success: function(data) {
                $("#first_name").val(data.name);

                for (let i = 0; i < data.comments.length; i++) {
                    var comment = '<div class="comment">'+
                                    '<div class="content">'+
                                        '<a class="author">'+data.comments[i].userFrom.name+'</a>'+
                                        '<div class="metadata">'+
                                            '<span class="date">'+data.comments[i].creation_date+'</span>'+
                                        '</div>'+
                                        '<div class="text">'+data.comments[i].text+'</div>'+
                                        '<div class="actions"><a class=""delete" onClick="deleteComment('+data.comments[i].id+')">Удалить</a></div>'+
                                    '</div>'+
                                '</div>';
                    $('#comments').append(comment);
                }
            }
        });
    }

    function clearComments() {
        $('#comments').html('');
    }

    function deleteComment(commentId) {
        $.ajax({
            url: "comment/"+commentId,
            type: 'DELETE',
            success: function () {
                clearComments();
                loadComments();
            }
        });
    }

    function addComment() {
        var text = $("#commentTextarea").val();
        var userTo = {"id": [[${id}]]};
        var data = {"text": text, "userTo": userTo};
        
        $.ajax({
            url: "comment",
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function() {
                clearComments();
                loadComments();
                $("#commentTextarea").val('');
            }
        });
    }
</script>
</body>
</html>